로딩 중이에요... 🐣
[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
08 포스트 기능 명세 및 헤더 UI 구성 | ✅ 편저: 코담 운영자
8강 - 포스트 기능 명세 및 헤더 UI 구성
기능명세, 헤더UI✨ 이번 강의 목표
- Django + Cookiecutter 기반 프로젝트에서 Instagram 스타일 헤더 UI 구성
- 게시물 기능 명세(CRUD 및 확장 기능)를 미리 정의
- base.html, header.html, index.html의 구조 이해 및 반영
🗂️ 1. 프로젝트 개요 및 템플릿 구조
✅ 프로젝트 개요
Django와 쿠키커터(cookiecutter)를 활용해 인스타그램 스타일의 헤더 UI를 TailwindCSS 기반으로 구현합니다.
✅ 템플릿 구성도
templates/
├── posts/
│ ├── base.html ← 전체 레이아웃 정의 (공통)
│ ├── index.html ← 메인 피드 페이지
│ ├── header.html ← 상단 네비게이션 바
🧱 2. base.html
✅ 설명
base.html은 전체 레이아웃의 뼈대 역할을 합니다. 모든 페이지는 이 템플릿을 확장(extends)하여 상단 헤더와 스타일, 구조를 공유하게 됩니다. 중복 없이 공통 레이아웃을 유지할 수 있게 해줍니다.
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
<link rel="stylesheet" href="{% static 'css/posts/main.css' %}" />
{% block staticBlock %}{% endblock staticBlock %}
<title>{% block title %}{% endblock title %} | Djangogram</title>
</head>
<body class="bg-gray-50">
<div class="header">
{% include "posts/header.html" %}
</div>
<div class="content">
{% block content %} {% endblock content %}
</div>
</body>
</html>
{% include "posts/header.html" %}: 상단 고정 헤더 포함{% block content %}: 개별 페이지 내용 삽입 영역
🖼️ 3. index.html (메인 피드)
✅ 설명
index.html은 포스트 목록을 보여주는 메인 페이지입니다. base.html을 상속받고, {% block content %} 부분에 피드(게시물 리스트)가 들어가게 됩니다. 현재는 비어 있지만 추후 포스트 리스트 렌더링이 들어갈 영역입니다.
{% extends "posts/base.html" %}
{% block title %}post 메인{% endblock title %}
{% block content %}
<!-- 컨텐츠 영역 -->
{% endblock content %}
🧭 4. header.html 구성
✅ 설명
상단 고정된 내비게이션 바로, 인스타그램처럼 로고, 검색창, 업로드, 프로필, 로그아웃 버튼 등을 포함합니다. TailwindCSS와 FontAwesome을 활용해 간결하면서도 직관적인 UI를 구성합니다.
- 로고: 클릭 시 메인 페이지로 이동
- 검색창: 실제 검색 기능은 나중에 연결될 예정
- fa-plus-circle: 새 게시물 작성 링크
- fa-user: 프로필 이동
- fa-sign-out: 로그아웃 처리 예정
{% load static %}
<header class="bg-white py-2 px-4 shadow-md sticky top-0 z-50 flex items-center justify-center">
<div class="flex justify-between items-center w-full max-w-5xl">
<div class="cursor-pointer">
<a href="{% url 'posts:index' %}">
<img src="{% static 'images/instagram.png' %}" alt="instagram" class="h-10">
</a>
</div>
<div class="flex-1 mx-5 relative hidden md:block">
<input type="search" placeholder="검색..." id="q" name="q"
class="w-full px-4 py-2 text-sm border border-gray-300 rounded-full shadow-sm">
</div>
<div class="flex gap-5 items-center">
<div class="cursor-pointer hover:scale-110">
<a href="#"><i class="fa fa-plus-circle text-gray-600 text-2xl"></i></a>
</div>
<div class="cursor-pointer hover:scale-110">
<a href="#"><i class="fa fa-user text-gray-600 text-2xl"></i></a>
</div>
<div class="cursor-pointer hover:scale-110">
<a href="#"><i class="fa fa-sign-out text-gray-600 text-2xl"></i></a>
</div>
</div>
</div>
</header>
sticky top-0으로 상단 고정,fa아이콘을 사용한 메뉴 구성, 반응형 레이아웃 포함
🎨 5. CSS 스타일링 (main.css or header.css)
✅ 설명
TailwindCSS를 사용하더라도 일부 고정된 CSS 설정은 직접 정의해줘야 합니다. 여기서는 header 영역에 대한 배경, 패딩, 고정 위치 등의 속성을 CSS로 보완합니다. 주로 디자인 일관성 및 브라우저 호환성을 위한 목적입니다.
header {
background-color: #fff;
padding: 10px 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
✅ 6. 기능 명세 정리
✅ 설명
우리가 앞으로 구현할 전체 '게시물 시스템'의 기능을 미리 정의한 것입니다. 이를 기반으로 모델 정의, 뷰 구현, 템플릿 처리까지 이어질 예정입니다. 핵심은 CRUD이며, 실제 SNS 기능을 구성하는 데 꼭 필요한 항목들을 포함했습니다.
📌 기본 기능 (CRUD)
| 항목 | 설명 |
|---|---|
| Create | 게시물 작성 (사진 업로드 포함) |
| Read | 전체 게시물 리스트 및 상세 조회 |
| Update | 본인이 작성한 게시물 수정 |
| Delete | 본인이 작성한 게시물 삭제 |
📌 추가 기능
| 항목 | 설명 |
|---|---|
| 댓글 | 댓글 입력 및 출력 |
| 좋아요 | 게시물 좋아요 / 취소 |
| 검색 | 사용자 또는 해시태그 검색 |
| 사용자 피드 | 특정 사용자별 게시물 목록 출력 |
✅ 정리
- 프로젝트 템플릿 구조는 base → header → index 형태로 구성
- 헤더는 TailwindCSS와 FontAwesome으로 반응형 + 고정 UI 구현
- 전체 기능 흐름은 CRUD 기반에 SNS 필수 기능까지 계획됨
👉 다음 강의에서는 실제 Post 모델 생성과 업로드 뷰 개발을 진행합니다.
Python 코드 실행기
